<template>
  <view
    class="container"
    :class="{ popupShow: popupShow, popupShow: showHelps }"
  >
    <scroll-view scroll-y>
      <view class="m-back" @click="back">
        <u-icon name="arrow-left" color="#fff" size="20"></u-icon>
      </view>
      <view class="swipper">
        <swiper circular indicator-dots autoplay @change="currentChange">
          <swiper-item v-for="item in goodsDetail.mainPictures" :key="item">
            <image :src="item" mode="scaleToFill" />
            {{ item }}
          </swiper-item>
        </swiper>
        <!-- <view class="indicator">
          <text class="current">{{ currentPage }}</text>
          <text class="split">/</text> -->
        <!-- goodsDetail.mainPictures.length -->
        <!-- <text class="total">{{ goodsDetail.mainPictures }}</text>
        </view> -->
      </view>
      <view class="m-meta">
        <view class="price">
          <text class="symbol">￥</text>
          <text class="number">{{ goodsDetail.price }}</text>
        </view>
        <view class="ellipsis name">{{ goodsDetail.name }}</view>
        <view class="remarks">{{ goodsDetail.desc }}</view>
      </view>
      <view class="m-choice" @click="buyChoice">
        <view class="rol">
          <view class="left">
            <text class="label">品名</text>
            <text class="text ellipsis">请选择商品规格</text>
          </view>
          <view>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
      <view class="m-choice" @click="addressShow">
        <view class="rol">
          <view class="left">
            <text class="label">送至</text>
            <text class="text ellipsis">{{ selectedAddress }}</text>
          </view>
          <view>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
      <view class="m-choice" @click="showHelp">
        <view class="rol">
          <view class="left">
            <text class="label">服务</text>
            <text class="text ellipsis">无忧退 快速退款 免费包邮</text>
          </view>
          <view>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>
      </view>
      <view class="m-detail m-panel">
        <view class="title">
          <text>详情</text>
        </view>
        <view class="content">
          <view class="properties">
            <view
              class="item"
              v-for="item in repairproperties"
              :key="item.name"
            >
              <text class="label">{{ item.name }}</text>
              <text class="value">{{ item.value }}</text>
            </view>
          </view>
          <image
            v-for="item in repairpictures"
            :key="item"
            :src="item"
            mode="widthFix"
          />
        </view>
      </view>
      <view class="question" @click="shipShow">
        <view class="left">
          <view class="n">
            <u-icon name="question-circle" color="#606266" size="16" />
          </view>
          <view class="none">常见问题</view>
        </view>
        <view class="right">
          <u-icon name="arrow-right" />
        </view>
      </view>
      <view class="m-panel m-recommend">
        <view class="title">
          <text>推荐</text>
        </view>
        <view class="content">
          <navigator
            v-for="item in goodsDetail.similarProducts"
            :key="item.id"
            :url="`/pages/goods/index?id=${item.id}`"
            open-type="navigate"
            hover-class="navigator-hover"
          >
            <image :src="item.picture" mode="aspectFit" class="image" />
            <view class="name ellipsis">{{ item.name }}</view>
            <view class="price">
              <text class="symbol">￥</text>
              <text class="number">{{ item.price }}</text>
            </view>
          </navigator>
        </view>
      </view>
    </scroll-view>
    <view class="bottom-bar">
      <view class="bottom-bar-fixed">
        <view class="icon-group">
          <u-icon name="heart" color="#333" size="36rpx"></u-icon>
          <view>收藏</view>
        </view>
        <view class="icon-group">
          <u-icon name="kefu-ermai" color="#333" size="36rpx"></u-icon>
          <view>客服</view>
          <button open-type="contact">客服按钮</button>
        </view>
        <navigator
          :url="`/pages/cart/index?goods_id=${goodsDetail.goods_id}`"
          open-type="switchTab"
          class="icon-group"
        >
          <u-icon name="shopping-cart" color="#333" size="36rpx"> </u-icon>
          <view>购物车</view>
          <text class="badge">{{ count }}</text>
        </navigator>
        <view class="btn" @click="addToCart">加入购物车</view>
        <view class="btn" @click="buyItNow">立即购买</view>
      </view>
    </view>
    <echone-sku
      :isChoice="isChoice"
      v-if="popupShow"
      :show="popupShow"
      mode="forbidden"
      :theme-color="themeColor"
      :combinations="combinations"
      :specifications="specifications"
      :default-select-index="selectedIndex"
      :combinations-props="combinationsProps"
      :specifications-props="specificationsProps"
      @close="handleClose"
      @confirm="handleConfirm"
      @addCar="handleAddCart"
    ></echone-sku>
    <u-popup mode="bottom" height="50%" :show="showShip" @close="handleClose">
      <view class="helps"><shipment @close="handleClose" /></view>
    </u-popup>

    <u-popup mode="bottom" height="50%" :show="showHelps" @close="handleClose">
      <view class="helps"><helps @close="handleClose" /></view>
    </u-popup>

    <u-popup
      mode="bottom"
      height="50%"
      :show="showAddress"
      @close="handleClose"
    >
      <view class="clause"
        ><clause
          @close="handleClose"
          @changeAddress="changeAddress"
          :address="address"
      /></view>
    </u-popup>
  </view>
</template>
<script>
import echoneSku from './components/echone-sku.vue'
import shipment from './components/shipment.vue'
import helps from './components/helps.vue'
import clause from './components/clause.vue'
import { data } from 'uview-ui/libs/mixin/mixin'
export default {
  name: 'addadadaqqqqqq',
  components: { shipment, helps, echoneSku, clause },
  data () {
    return {
      goodsDetail: {},
      currentPage: 1,
      show: false,
      themeColor: '#fe560a',
      popupShow: false,
      choicePopupShow: false,
      combinationsProps: {
        id: 'skuId',
        value: 'skuValue',
        image: 'skuImage',
        price: 'skuPrice',
        stock: 'skuStock'
      },
      specificationsProps: {
        id: 'id',
        list: 'skuList',
        name: 'skuName'
      },
      combinations: [],
      specifications: [],
      selectedIndex: 0,
      isChoice: 'buy',
      showHelps: false,
      showShip: false,
      selectedAddress: '湖北省武汉市黄陂区',
      showAddress: false,
      address: [],
      repairproperties: [],
      repairpictures: []
    }
  },
  onLoad (options) {
    console.log(options)
    this.getdetail(options.id)
    this.getAddress()
  },
  computed: {
    cartList () {
      return JSON.parse(JSON.stringify(this.$store.state.shopList.cartList))
    },
    count () {
      return this.$store.getters['shopList/allCount']
    }
  },
  methods: {
    addressShow () {
      this.showAddress = true
    },
    async getAddress () {
      const res = await uni.$u.http.get('/member/address')
      this.address = res.data.result
    },
    async getdetail (id) {
      const res = await uni.$u.http.get(`/goods?id=${id}`)
      console.log(res.data.result)
      this.goodsDetail = res.data.result
      this.repairproperties = res.data.result.details.properties
      this.repairpictures = res.data.result.details.pictures

      let img = this.goodsDetail.specs[0].values[0].picture
      let specList = this.goodsDetail.specs.map(item => {
        let list = item.values.map(item1 => item1.name)
        return {
          skuName: item.name,
          id: item.id,
          skuList: list
        }
      })
      this.specifications = specList
      let skus = this.goodsDetail.skus.map(item => {
        let skuValue = item.specs.map(item1 => item1.valueName).join(',')
        return {
          skuId: item.id,
          skuValue: skuValue,
          skuImage: img,
          skuPrice: Number(item.price),
          skuStock: Number(item.inventory)
        }
      })
      this.combinations = skus
    },
    currentChange (e) {
      this.currentPage = e.detail.current + 1
    },
    showHelp () {
      this.showHelps = true
    },
    buyItNow () {
      this.popupShow = true
      this.isChoice = 'buy'
    },
    buyChoice () {
      this.popupShow = true
      this.isChoice = 'choice'
    },
    addToCart () {
      this.popupShow = true
      this.isChoice = 'cart'
    },
    handleClose () {
      this.popupShow = false
      this.showHelps = false
      this.showShip = false
      this.showAddress = false
    },
    handleConfirm (obj) {
      console.log(obj)
      this.popupShow = false
      const index = this.cartList.findIndex(item => {
        return item.skuId === obj.skuId
      })
      console.log(index)
      if (index === -1) {
        const { count, skuImage, skuPrice, skuValue, skuId } = obj
        this.cartList.unshift({
          skuId, //商品skuid
          count, //商品数量
          skuImage, // 图片
          skuPrice, //价格
          skuValue, //所选属性
          selected: true, //选中
          name: this.goodsDetail.name, // 商品名称
          goodsId: this.goodsDetail.id // 商品id
        })
      } else {
        this.cartList[index].count += obj.count
        // this.updata(obj.skuId,{selected:false,count:obj.count})
      }
      this.$store.commit('shopList/getCartList', this.cartList)
    },
    handleAddCart (obj) {
      this.popupShow = false
      const index = this.cartList.findIndex(item => {
        return item.skuId === obj.skuId
      })
      console.log(index)
      if (index === -1) {
        const { count, skuImage, skuPrice, skuValue, skuId } = obj
        this.cartList.unshift({
          skuId, //商品skuid
          count, //商品数量
          skuImage, // 图片
          skuPrice, //价格
          skuValue, //所选属性
          selected: false, //选中
          name: this.goodsDetail.name, // 商品名称
          goodsId: this.goodsDetail.id // 商品id
        })
        this.toCart({ skuId, count })
      } else {
        this.cartList[index].count += obj.count
        // this.updata(obj.skuId,{selected:false,count:obj.count})
      }
      this.$store.commit('shopList/getCartList', this.cartList)
      uni.showToast({
        title: '加入购物车成功',
        mask: true
      })
    },
    shipShow () {
      this.showShip = true
    },
    back () {
      uni.navigateBack({
        delta: 1
      })
    },
    changeAddress (val) {
      this.selectedAddress = val
    },
    async toCart (data) {
      await uni.$u.http.post('/member/cart', data)
    },
    async updata (id, params) {
      console.log(data)
      const res = await uni.$u.http.put(`/member/cart/${id}`, { params })
      console.log(res + '34234')
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f4f4f4;
  scroll-view {
    flex: 1;
    height: calc(100vh - 120rpx);
  }

  .swipper {
    position: relative;
    width: 750rpx;
    height: 750rpx;
    swiper {
      width: 750rpx;
      height: 750rpx;
      swiper-item {
        width: 100%;
        height: 100%;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .indicator {
      position: absolute;
      height: 40rpx;
      padding: 0 24rpx;
      line-height: 40rpx;
      border-radius: 30rpx;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.3);
      bottom: 30rpx;
      right: 30rpx;
      font-size: 24rpx;
    }
  }
  .m-meta {
    position: relative;
    border-bottom: 1px solid #eaeaea;
    background-color: #fff;
    .price {
      height: 130rpx;
      padding: 25rpx 30rpx 0;
      color: #fff;
      font-size: 34rpx;
      box-sizing: border-box;
      background-color: #35c8a9;
      .number {
        font-size: 56rpx;
      }
    }
    .name {
      max-height: 88rpx;
      line-height: 1.4;
      margin: 20rpx;
      font-size: 32rpx;
      color: #333;
    }
    .ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .remarks {
      line-height: 1;
      padding: 0 20rpx 30rpx;
      font-size: 24rpx;
      color: #cf4444;
    }
  }
  .m-choice {
    padding-left: 20rpx;
    background-color: #fff;
    .rol {
      height: 90rpx;
      padding-right: 20rpx;
      border-bottom: 1px solid #eaeaea;
      font-size: 26rpx;
      color: #333;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
        .label {
          width: 60rpx;
          color: #898b94;
          margin: 0 16rpx 0 10rpx;
        }
        .text {
          flex: 1;
          -webkit-line-clamp: 1;
        }
      }
      .right {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
      }
    }
  }
  .m-detail {
    padding-left: 20rpx;
    .content {
      margin-left: -20rpx;
      .properties {
        padding: 0 20rpx;
        margin-bottom: 30rpx;
        .item {
          display: flex;
          line-height: 2;
          padding: 10rpx;
          font-size: 26rpx;
          color: #333;
          border-bottom: 1rpx dashed #ccc;
          .label {
            width: 200rpx;
          }
          .value {
            flex: 1;
          }
        }
      }
    }
    image {
      width: 100%;
      vertical-align: middle;
      overflow: hidden;
      display: inline-block;
    }
  }
  .m-panel {
    margin-top: 20rpx;
    background-color: #fff;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 30rpx;
      line-height: 1;
      padding: 30rpx 60rpx 30rpx 6rpx;
      position: relative;
      text {
        margin: 0;
        padding-left: 10rpx;
        font-size: 28rpx;
        color: #333;
        font-weight: 600;
        border-left: 4rpx solid #27ba9b;
      }
    }
  }
  .question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #333;
    background-color: #fff;
    .left {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .m-recommend {
    padding-left: 20rpx;
    .content {
      padding: 0 20rpx 20rpx;
      margin-left: -20rpx;
      background-color: #f4f4f4;
      overflow: hidden;
      navigator {
        width: 300rpx;
        padding: 24rpx 20rpx 20rpx;
        margin: 20rpx 20rpx 0 0;
        border-radius: 10rpx;
        background-color: #fff;
        float: left;
        display: block;
      }
      .image {
        height: 260rpx;
        width: 100%;
      }
      .name {
        height: 80rpx;
        margin: 10rpx 0;
        font-size: 26rpx;
        color: #262626;
      }
      .price {
        line-height: 1;
        font-size: 20rpx;
        color: #cf4444;
        .number {
          font-size: 26rpx;
          margin-left: 2rpx;
        }
      }
    }
  }
  .bottom-bar {
    height: 120rpx;
    .bottom-bar-fixed {
      display: flex;
      align-items: center;
      height: 120rpx;
      background-color: #fff;
      border-top: 1px solid #eaeaea;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      .icon-group {
        flex: 1;
        font-size: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        position: relative;
        button {
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
        }
        .badge {
          text-align: center;
          border-radius: 35%;
          height: 30rpx;
          line-height: 30rpx;
          text-align: center;
          font-size: 25rpx;
          width: 35rpx;
          color: #fff;
          position: absolute;
          background-color: #f56c6c;
          right: 5rpx;
          top: -2rpx;
        }
      }
      .btn {
        width: 220rpx;
        height: 72rpx;
        border-radius: 72rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ffa868;
        color: #fff;
        margin: 0 10rpx;
        font-size: 26rpx;
        &:last-child {
          background-color: #27ba9b;
        }
      }
    }
  }
}
.dialog {
  height: 100vh;
  .box {
    width: 100%;
    height: 1080rpx;
  }
}
.popupShow {
  overflow: hidden;
  position: fixed;
}
.showHelps {
  overflow: hidden;
  position: fixed;
}
.m-recommend .content navigator:nth-child(even) {
  margin-right: 0;
}
.kong {
  height: 120rpx;
  width: 750rpx;
}
.helps {
  height: 500rpx;
}
.clause {
  min-height: 600rpx;
}
</style>
